body {
    margin     : 0 auto;
    min-width  : 320px;
    max-width  : 1080px;
    background : #fff;
    font-size  : 14px;
    font-family: -apple-system, Helvetica, sans-serif;
    line-height: 1.5;
    color      : #666;
}

.app {
    height: 45px;
}

.ap_ul {

    li {
        float           : left;
        height          : 45px;
        list-style      : none;
        color           : #fff;
        background-color: #333;
        text-align      : center;
        line-height     : 45px;

        &:nth-child(1) {
            width: 8%;

            img {
                width: 10px;
            }
        }

        &:nth-child(2) {
            width: 10%;

            img {
                width         : 30px;
                // 7、 line-height不能让图片居中，这里的图片是img；
                vertical-align: -23%;
            }
        }

        &:nth-child(3) {
            width: 57%;
        }

        &:nth-child(4) {
            width           : 25%;
            background-color: #e0332d;
        }
    }
}

.search-wrap {
    position : fixed;
    overflow : hidden;
    width    : 100%;
    height   : 44px;
    min-width: 320px;
    max-width: 1080px;
}

.se_btn {
    position: absolute;
    top     : 0;
    left    : 0;
    width   : 40px;
    height  : 100%;

    &::before {
        content   : '';
        display   : block;
        position  : absolute;
        top       : 14px;
        left      : 15px;
        width     : 20px;
        height    : 18px;
        background: url(../img/s-btn.png) center/cover no-repeat;
    }
}

.se_login {
    position   : absolute;
    top        : 0;
    right      : 0;
    width      : 40px;
    height     : 100%;
    line-height: 44px;
    color      : #fff;
}

.search {
    position        : relative;
    height          : 30px;
    background-color: #fff;
    margin          : 7px 50px;
    border-radius   : 15px;
}

.jd-icon {
    position  : absolute;
    top       : 8px;
    left      : 15px;
    width     : 20px;
    height    : 15px;
    background: url(../img/jd.png) center/cover no-repeat;

    &::after {
        content     : "";
        position    : absolute;
        border-right: 1px solid #ddd;
        top         : 0;
        left        : 26px;
        height      : 16px
    }
}

.sou {
    position        : absolute;
    top             : 8px;
    left            : 50px;
    width           : 18px;
    height          : 15px;
    background-color: pink;
    // background: url(../img/jd-sprites.png)  no-repeat -82px 0;
    background      : url(../img/jd-sprites.png) center no-repeat;
    background-size : 200px auto;
}

.slider {

    img {
        vertical-align: middle;
    }
}

.brand {
    display: flex;

    div {
        width: 33.3%;
    }

    img {
        width: 100%;

    }
}

// nav部分

nav a {
    float: left;
    width: 20%;
    text-align: center;
}
nav a img {
    width: 40px;
}